<template>
  <div class="statistics-sheet" :class="{ 'is-expanded': isExpanded }">
    <div class="inner-content">
      <!-- 返回按钮和标题 -->
      <div class="header">
        <div class="back-button" @click="$emit('close')">
          <img src="@/assets/images/user/q2.png" alt="返回" />
        </div>
        <div class="title">{{ t("mrsy") }}</div>
      </div>

      <!-- 收入统计图表 -->
      <div class="chart-container">
        <div class="chart">
          <!-- 这里放置图表，实际项目中可能需要引入图表库 -->
          <div class="chart-grid">
            <Chart :option="chartOption" style="width: 100%; height: 300px;" />
          </div>
          <!-- <div class="chart-legend">
            <div class="legend-item">
              <div class="legend-color"></div>
              <div class="legend-text">
                {{ t("statistics_legend", { w: 14 }) }}(COP)
              </div>
            </div>
          </div> -->
        </div>
      </div>

      <!-- 统计数据部分 -->
      <div class="statistics-data">
        <div class="data-row">
          <div class="data-item">
            <!-- 存款总额 -->
            <div class="data-label">
              {{ t("user-team_jumlahTotalDeposit") }}
            </div>
            <div class="data-value">{{ totalDeposit }}</div>
          </div>
          <div class="data-item">
            <!-- 收入总额 -->
            <div class="data-label">{{ t("statistics_total") }}</div>
            <div class="data-value">{{ totalIncome }}</div>
          </div>
        </div>

        <div class="data-row">
          <div class="data-item">
            <!-- 昨日收入 -->
            <div class="data-label">{{ t("statistics_yesterday") }}</div>
            <div class="data-value">{{ yesterdayIncome }}</div>
          </div>
          <div class="data-item">
            <!-- 今日收入 -->
            <div class="data-label">{{ t("statistics_today") }}</div>
            <div class="data-value">{{ todayIncome }}</div>
          </div>
        </div>

        <div class="data-row">
          <div class="data-item">
            <!-- 团队成员人数 -->
            <div class="data-label">{{ t("statistics_team") }}</div>
            <div class="data-value">{{ teamMembers }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import Chart from './Chart/index.vue'
const { t } = useI18n();
const props = defineProps({
  isExpanded: {
    type: Boolean,
    default: false,
  },
  totalDeposit: {
    type: Number || String,
    default: 0,
  },
  totalIncome: {
    type: Number || String,
    default: 0,
  },
  yesterdayIncome: {
    type: Number || String,
    default: 0,
  },
  todayIncome: {
    type: Number || String,
    default: 0,
  },
  teamMembers: {
    type: Number || String,
    default: 0,
  },
  availableSlots: {
    type: Number,
    default: 0,
  },
  chartData: {
    type: Array as () => Array<{ date: string; number: string }>,
    default: () => [],
  },
});

defineEmits(["close"]);

const numbers = computed(() => props.chartData.map(item => Number(item.number)));
const maxValue = computed(() => Math.max(...numbers.value, 0));

const chartOption = computed(() => ({
  tooltip: { trigger: "axis" },
  grid: {
    left: 60,
    right: 20,
    top: 30,
    bottom: 30
  },
  xAxis: {
    type: "category",
    data: props.chartData.map((item) => item.date.split('-')[1]+'-'+item.date.split('-')[2]),
  },
  yAxis: {
    type: "value",
    axisLabel: {
      margin: 16,
      fontSize: 12,
      formatter: '{value}'
    },
    min: 0,
    max: maxValue.value === 0 ? 500 : Math.max(500, Math.ceil(maxValue.value * 1.3))
  },
  series: [
    {
      data: numbers.value,
      type: "line",
      smooth: true,
      areaStyle: {},
    },
  ],
}))
</script>

<style scoped lang="less">
.statistics-sheet {
  width: 100%;
  background-color: #221a18;
  display: flex;
  flex-direction: column;
}

.inner-content {
  padding: 16px 16px 5px 16px;
  overflow-y: auto;
  flex: 1;
}

.header {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.back-button {
  width: 24px;
  height: 24px;
  margin-right: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;

  img {
    width: 20px;
    height: 20px;
  }
}

.title {
  color: #fff;
  font-size: 14px;
  flex: 1;
}

.chart-container {
  width: 100%;

  background-color: #2d2624;
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 15px;
  box-sizing: border-box;
}

.chart {
  height: 100%;
  position: relative;
}

.chart-grid {
  height: 300px;
}

.y-axis {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-right: 10px;
  color: #9b9b9b;
  font-size: 12px;
}

.chart-area {
  flex: 1;
  position: relative;
  border-left: 1px dashed rgba(255, 255, 255, 0.1);
  border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
}

.line-chart {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  background-position: center;
  background-repeat: no-repeat;
}

.x-axis {
  position: absolute;
  bottom: -20px;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  color: #9b9b9b;
  font-size: 10px;
}

.chart-legend {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.legend-item {
  display: flex;
  align-items: center;
}

.legend-color {
  width: 15px;
  height: 15px;
  background-color: #e2c4a9;
  margin-right: 5px;
}

.legend-text {
  color: #e2c4a9;
  font-size: 12px;
}

.chart-tooltip {
  background-color: #e2c4a9;
  color: #221a18;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.statistics-data {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.data-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.data-item {
  flex: 1;
  background-color: #2d2624;
  border-radius: 8px;
  padding: 12px;
}

.data-label {
  color: #9b9b9b;
  font-size: 12px;
  margin-bottom: 5px;
}

.data-value {
  color: #fff;
  font-size: 16px;
  font-weight: 500;
}
</style>
